<template>
  <div>
<<<<<<< HEAD
    <comment-header></comment-header>
    <div class="root">
      <video id="my-video" controls preload="auto" data-setup="{}">
        <source :src="'http://video.petshow.cc'+contentList.video" type="video/mp4">
      </video>

      <div class="mask">
        <div class="header">
          <img :src="contentList.user.avatar" alt>
          <div>
            <div class="nick" v-text="contentList.user.nick"></div>
            <div class="city">
              <span v-text="contentList.user.city"></span>
            </div>
          </div>
        </div>
        <div class="photo">
          <van-icon name='star-o'/>
          <span>我也要拍</span>
        </div>
      </div>
      <div v-if="contentList.word!==''" class="like_comment" v-text="contentList.word"></div>
      <div class="like_comment">
        <div>
          <van-icon name="like-o"/>
          <span v-text="contentList.like_num"></span>
          <span>喜欢</span>
        </div>
        <div>
          <van-icon name="comment-o"/>
          <span v-text="contentList.comment_num"></span>
          <span>评论</span>
        </div>
      </div>
    </div>
=======
        <comment-header></comment-header>
       
>>>>>>> e38c138e4db169608cc0944a009eddf5130ddf05
  </div>
</template>

<script>
import commentHeader from "../../components/comment/commentHeader";
export default {
  components: {
    commentHeader
  },
<<<<<<< HEAD
  data() {
    return {
      contentList: ""
    };
  },
  created() {
    this.contentList = JSON.parse(
      window.localStorage.getItem("scrawlItem" || "[]")
    );
    // this.scrawlInContent()
    console.log(this.contentList);
  },
  methods: {
    // scrawlInContent:function(){
    //     var that = this
    //     this.$http.get('/pet/v2/petalbumrandomlist?pet_album_id=117381').then(function(data){
    //         that.contentList = data.body.data.list
    //     })
    // }
=======
    data(){
        return{
             contentList: [],
        }
    },
  
>>>>>>> e38c138e4db169608cc0944a009eddf5130ddf05
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.root {
  position: relative;
}
#my-video {
  width: 100vw;
  height: 100vw;
  margin-bottom: 3vw;
}
.mask {
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding: 5vw 3vw;
  width: 100vw;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../../../static/image/user_bg.png");
}
.mask .header{
  display: flex;
  justify-content: flex-start;
}
.mask img {
  width: 12vw;
  height: 12vw;
  margin-right: 3vw;
  border-radius: 50%;
  border: 1vw solid #ffffff;
}
.mask .nick {
  font-weight: bold;
  font-size: 5vw;
}
.mask .city {
  font-size: 3.2vw;
}
.mask .photo{
  background: #cc5340;
  padding: 1.5vw 4vw;
  border-radius: 5vw;
}
.mask .photo:hover{
  background: #ffffff;
  color: #cc5340;
}

.like_comment {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  padding: 3vw;
  border-bottom: 1px solid #eee;
}
.like_comment div .van-icon,.mask .photo .van-icon {
  vertical-align: bottom;
}
.like_comment div:first-child {
  margin-right: 3vw;
}
</style>